<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="warning-container">
    <div class="main-container">
      <img class="icon-warning" src="../../../assets/png/alert-triangle.png" />
      <span class="main-title">
        <span class="title">最新告警</span>
        <span class="number-container">4</span>
      </span>
      <img class="icon-arrow" @click="handleVisible" src="../../../assets/png/arrow-down.png" />
    </div>
    <!-- visible -->
    <div class="warning-list" v-if="data.visible">
      <div class="item-warning" v-for="(item,index) in data.warningList" :key="index">
        <div class="item-top">
          <span class="item-value name">{{item.camera_name}} {{item.camera_position}}</span>
          <span class="item-value action">查看</span>
        </div>
        <div class="item-bottom">
          <span class="item-value type">{{item.check_type}}</span>
          <span class="item-value time">{{item.time}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch, defineProps } from "vue";
// import { useStore } from "vuex";

// const store = useStore(); // 该方法用于返回store 实例

const props = defineProps(["data"]);

const data = reactive({
  warningList: [],
  visible: true
});
watch(
  () => props.data,
  curr => {
    data.warningList = curr;
  }
);

const handleVisible = () => {
  data.visible = !data.visible;
};
</script>

<style lang="less">
.warning-container {
  position: absolute;
  top: 0;
  right: -8px;
  width: 268px;
  background: #f0f6fc;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  .main-container {
    width: 244px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    .icon-warning {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }
    .main-title {
      flex: 1;
      display: flex;
      align-items: center;
      .title {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #ff6e00;
        line-height: 20px;
      }
      .number-container {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
        width: 16px;
        height: 16px;
        background: #ee0a24;
        border-radius: 16px;
        border: 1px solid #ffffff;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .icon-arrow {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
  .warning-list {
    width: 244px;
    margin-top: 12px;
    .item-warning {
      height: 58px;
      padding: 8px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .item-top,
      .item-bottom {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
      }
      .item-top {
        margin-bottom: 8px;
        .name {
          flex: 1;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: bolder;
          color: rgba(254, 254, 254, 0.88);
        }
        .action {
          cursor: pointer;
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #1890ff;
          line-height: 17px;
        }
      }
      .item-bottom {
        .type {
          flex: 1;
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
        }
        .time {
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
  }
}
</style>